<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/1.css" />
	</head>

	<body>
		<!--外边框-->
		<div id="outer">
			<!--计算器标题和窗口按钮-->
			<div id="header">
				<div id="h1">
					计算器
				</div>
				<div id="h2">

					<input type="button" class="b1" value="-" />
					<input type="button" class="b1" value="口" />
					<input type="button" class="b1" value="X" />
				</div>
			</div>
			<!--选择计算器功能和历史记录菜单-->
			<div id="menu">
				<div>
					菜单
				</div>
				<div>
					标准
				</div>
				<div>
					历史记录
				</div>
			</div>
			<div id="content">
				<div id="display">
					<div id="save">

					</div>

					<div id="result">

					</div>
				</div>
				<div id="fms">
					<div class="ms">
						MC
					</div>
					<div class="ms">
						MR
					</div>
					<div class="ms">
						M+
					</div>
					<div class="ms">
						M-
					</div>
					<div class="ms">
						MS
					</div>
					<div class="ms">
						M
					</div>
				</div>
				<div id="but">

					<div class="key keyg">
						%
					</div>
					<div class="key keyg">
						√
					</div>
					<div class="key keyg" id="sqr">
						x<sup>2</sup>
					</div>
					<div class="key keyg">
						1/x
					</div>
					<div class="key keyg" id="cebut">
						CE
					</div>
					<div class="key keyg" id="cbut">
						C
					</div>
					<div class="key keyg" id="bsbut">
						&larr;
					</div>
					<div class="key keyg" id="div">
						&divide;
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						7
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						8
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						9
					</div>
					<div class="key keyg" id="mul">
						&times;
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						4
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						5
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						6
					</div>
					<div class="key keyg" id="sub">
						-
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						1
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						2
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						3
					</div>
					<div class="key keyg" id="add">
						+
					</div>
					<div class="key keyg" id="neg">
						&plusmn;
					</div>
					<div class="key keyw" onclick="getValue(this.innerText)">
						0
					</div>
					<div class="key keyg" onclick="getValue(this.innerText)">
						.
					</div>
					<div class="key keyg" id="equal">
						=
					</div>

				</div>
			</div>
		</div>

		<script type="text/javascript">
			var valueinput = ""; //输入框
			var valuesave = ""; //保存记录框
			var operator=0; //保存运算符
			var num1 = 0;
			var num2 = 0;
			var op;
			var isPressEqualsKey = false; //记录是否按下”=“键

			//CE:输入框清零
			cebut.onclick = function() {
				result.innerText = "0";
				valueinput = "";
				operator = 0;
			}

			//C:输入框和保存数据清零
			cbut.onclick = function() {
				result.innerText = "0";
				save.innerText = "";
				valueinput = "";
				valuesave = "";
			}
			//退格
			bsbut.onclick = function() {
				if(valueinput.length > 1) {
					valueinput = valueinput.substring(0, valueinput.length - 1);
					result.innerText = valueinput;
				} else {
					valueinput = "";
					result.innerText = 0;
				}
			}

			//数值添加,小数点只有一个
			function getValue(val) {
				if(val == ".") {
					if(valueinput.indexOf(".") < 0) {
						valueinput  += val;
					}
				} else {
					valueinput +=  val;
				}
				result.innerText = valueinput;
			}

			//正负号
			neg.onclick = function() {
				valueinput = -valueinput;
				result.innerText = valueinput;
			}

//			function getOperation(val) {
//				if(valueinput=="" && valuesave==""){
//				valuesave ="0"+valueinput+val;
//				return;
//				}else{
//					valuesave+=valueinput+val;
//				}
//				save.innerText=valuesave;
//				valueinput="";
//				result.innerText=0;
//			}
//			
//			//等号
//			equal.onclick=function(){
//				save.innerText="";
//				result.innerText="";
//				result.innerText = eval("9+".concat("1"));
//				valuesave="";
//				valueinput="";
//			}

//eval计算字符串总出错 ，从头再来
//计算对象 
	var operateExp = {
		'+': function(num1, num2) {
			return num1 + num2;
		},
		'-': function(num1, num2) {
			return num1 - num2;
		},
		'*': function(num1, num2) {
			return num1 * num2;
		},
		'/': function(num1, num2) {
			return num2 === 0 ? 0 : num1 / num2;
		}
	}
	
	//计算函数 
	var operateNum = function(num1, num2, op) {
		if(!(num1 && num2)) return;
		//保证num1,num2都为数字 
		num1 = Number(num1);
		num2 = Number(num2);
		//不存在操作符,返回num1; 
		if(!op) return num1;
		//匹配运算公式 
		if(!operateExp[op]) return 0;
		return operateExp[op](num1, num2);
	}

		add.onclick= function(){
			if(operator==0){
				num1 = new Number(valueinput);
				operator=1;
				op="+";
				save.innerText = num1+"+";
				valueinput ="";
			}else{
				num2 = new Number(valueinput);
				var res = operateNum(num1, num2, op);
				num1 = result;
				op="+";
				save.innerText = num1+"+";
				valueinput ="";
			}
		}
		sub.onclick= function(){
			if(operator==0){
				num1 = new Number(valueinput);
				operator=1;
				op="-";
				save.innerText = num1+"-";
				valueinput ="";
			}else{
				num2 = new Number(valueinput);
				var res =operateNum(num1, num2, op);
				num1 = result;
				op="-";
				save.innerText = num1+"-";
				valueinput ="";
			}
		}
		mul.onclick= function(){
			if(operator==0){
				num1 = new Number(valueinput);
				operator=1;
				op="*";
				save.innerText = num1+"*";
				valueinput ="";
			}else{
				num2 = new Number(valueinput);
				var res = operateNum(num1, num2, op);
				num1 = result;
				op = "*"
				save.innerText = num1+"+*";
				valueinput ="";
			}
		}
		div.onclick= function(){
			if(operator==0){
				num1 = new Number(valueinput);
				operator=1;
				op="+";
				save.innerText = num1+"/";
				valueinput ="";
			}else{
				num2 = new Number(valueinput);
				var res = operateNum(num1, num2, op);
				num1 = result;
				op = "/";
				save.innerText = num1+"/";
				valueinput ="";
			}
		}
		
		equal.onclick=function(){
			num2 = new Number(valueinput);
			result.innerText = operateNum(num1, num2, operation);
			
		}
			
		</script>
	</body>

</html>